import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

interface CaptchaImageProps {
  onCaptchaChange: (captcha: string) => void;
}

const CaptchaImage: React.FC<CaptchaImageProps> = ({ onCaptchaChange }) => {
  const [captcha, setCaptcha] = useState('');

  const generateCaptcha = () => {
    const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    let result = '';
    for (let i = 0; i < 5; i++) {
      result += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    setCaptcha(result);
    onCaptchaChange(result);
  };

  useEffect(() => {
    generateCaptcha();
  }, []);

  return (
    <TouchableOpacity onPress={generateCaptcha} style={styles.container}>
      <View style={styles.captchaContainer}>
        <Text style={styles.captchaText}>{captcha}</Text>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    width: 100,
    height: 40,
  },
  captchaContainer: {
    width: '100%',
    height: '100%',
    backgroundColor: '#f0f0f0',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 4,
  },
  captchaText: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#333',
    letterSpacing: 2,
  },
});

export default CaptchaImage; 